<template>
	<view class="pl-36 pr-36 pt-72">
		<view class="col000 fz64">充值</view>
		<view v-if="userInfo.id" class="mt-62 bb pb24 fz28">账户余额：<text class="fz48 col000 bold">
				{{userInfo.now_money}}
			</text>元</view>
		<view class="mt-68 col333 fz30">选择充值金额</view>
		<view class="mt-32 list-box">
			<view @click="act_num=index" class="item-box mb-24"
				:class="[(index+2)%3==0?'midbox':'',index==act_num?'act-item':'']" v-for="(item,index) in list">
				<view class="pt24 fz36 col333">{{item.price}}元</view>
				<!-- <view class="pt24 fz24 col777">赠{{index}}次免发布信息</view> -->
				<view class="pl-16" style="text-align:left;">
					<view v-html="item.desc" class="pt24 fz24 col777"></view>
				</view>
			</view>
		</view>
		<view class="dindanlistab">
			<view class="col333 bold pt-36 fz36">充值说明
			</view>
			<view class="pt24 col777 fz28">充值金额只能消费，不能提现
			</view>

		</view>

		<!--添加按钮-->
		<view class="add-box">
			<u-tabbar inactiveColor="#fff" :border="false">
				<u-tabbar-item @click="$go('newaddress/address/editpath')" text="充值"></u-tabbar-item>
			</u-tabbar>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				act_num: 0,
				userInfo: {}
			}
		},
		onShow() {
			this.getUserInfo();
			this.getList();
		},
		methods: {
			getUserInfo() {
				this.$api['post']('user/refresh-user').then(res => {
					if (res.code == 200) {
						this.userInfo = res.data;
					}
				});
			},
			getList() {
				this.$api['get']("common/recharge", {}).then(res => {
					if (res.code == 200) {
						this.list = res.data;
					}
				});
			}
		}
	}
</script>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped lang="scss">
	page {
		background: #fff;
	}

	.list-box {
		overflow: hidden;

		.item-box {
			width: 30%;
			float: left;
			min-height: 140upx;
			background: #F0F0F0;
			// background:#0195FD;
			border-radius: 16upx;
			text-align: center;
		}

		.act-item {
			background: #0195FD !important;

			.col333,
			.col777 {
				color: #fff !important;
			}

		}

		.midbox {
			margin-left: 5%;
			margin-right: 5%;
		}

		.dindanlistab {
			width: 90%;

			float: left;
			margin-top: 30upx;
			margin-left: 5%;
			border-radius: 16upx;
			background: #FFFFFF;
		}

		.ttliaas {
			width: 100%;
			height: 82upx;
			float: left;
		}
	}
</style>